<html>
<head>
<title>Sprite Toggle - Prototype</title>
<link id="toggle-css" rel="stylesheet" type="text/css" href="style/toggle/toggle-100.css" />

<style type='text/css'>
body{
font-family: arial;
}

</style>
<% 
 String JS_PREFIX="";
String  JS_TOGGLE_PATH = "toggle"; 
%>

<script><!--
var _tt1,_tt2;
function pageLoaded() {
  var config1={className:'toggle',val0:'left',val1:'right',def:0};
  var config2={className:'toggle',val0:'left',val1:'right',def:1};
  _tt1=new Toggle('thetoggle-1', function(val) {alert("Toggle 1\nItem Selected "+val); }, config1 );
  _tt2=new Toggle('thetoggle-2', function(val) {alert("Toggle 2\nItem Selected "+val); }, config2  );
  _tt2.setEnabled(false);
}
function clickster(el) {
  //alert('clickster');
}
</script>

</head>

<body onload="pageLoaded()">

Sprite-Based Toggle (<a href='http://code.google.com/p/sprite-toggle/'>sprite-toggle</a>)
<div style='position: relative; '>
<div id='thetoggle-1' onclick='clickster(this);' style='top: 0; position: absolute; width: 200px; padding: 0px; background-color: inherit; border: green thin solid'></div>
<div id='thetoggle-2' onclick='clickster(this);' style='top: 0; left: 340; position: absolute; width: 200px; padding: 0px; background-color: inherit; border: green thin solid'></div>

<div style='position: absolute; top: 110px; left: 20px'>
<button onclick="_tt1.toggle();">toggle-1</button>
<button onclick="alert(_tt1.getVal());">toggle-1 value</button>
<br/>
<button onclick="_tt1.setEnabled(!_tt1.isEnabled());var es=document.getElementById('_tt1EnabledState').innerHTML=_tt1.isEnabled()?'Y':'N';">toggle-1 enable state</button>
<span id='_tt1EnabledState'></span>
</div>
<div style='position: absolute; top: 110px; left: 350px;'>
<button onclick="_tt2.toggle();alert(_tt2.getVal());">toggle-2</button>
<button onclick="alert(_tt2.getVal());">toggle-2 value</button>
<br/>
<button onclick="_tt2.setEnabled(!_tt2.isEnabled());var es=document.getElementById('_tt2EnabledState').innerHTML=_tt2.isEnabled()?'Y':'N';">toggle-2 enable state</button>
<span id='_tt2EnabledState'></span>
</div>


</div>

<script type='text/javascript' src='<%= JS_PREFIX %>js/<%= JS_TOGGLE_PATH %>/toggle.js'></script>


</body>

</html>